<template>
	<view class="box-padding" style="--px: 26rpx">
		<block v-for="(item, index) in researchList" :key="index">
			<!-- 答案 -->
			<view v-if="item.answer" class="title-cont flex align-between vertical-center mb-20 relative" hover-class="" @click="onClickTitleFn(index)">
				<view class="flex-1 flex vertical-center">
					<image style="width: 29rpx; height: 22rpx;margin-bottom: 8rpx;" src="../../../static/icon/check.png" mode=""></image>
					<text class="fn-25 fn-w ml-15">{{ item.title }}</text>
				</view>
				<text class="flex-1 fn-25 color-grey" style="text-align: center;">{{ item.answer }}</text>
				<view class="flex-1" style="text-align: right;">
					<image
						style="width: 22rpx; height: 14rpx; transition: all .35s; "
						:style="item.isUnfold ? 'transform: rotate(180deg)' : 'transform: rotate(0)'"
						src="../../../static/icon/xia.png"
						mode=""
					></image>
				</view>
			</view>
			<!-- 问题 -->
			<view class="relative" v-if="item.isUnfold">
				<view class="flex vertical-center align-center mt-30" style="margin-bottom: 50rpx;">
					<image :style="{ width: `${item.iconw}rpx` }" src="../../../static/icon/xuexi.png" mode="widthFix"></image>
					<text class="ml-20" style="font-size: 42rpx;line-height: 42rpx;">{{ item.problem }}</text>
				</view>
				<view v-for="(son, sonIndex) in item.selectList" :key="sonIndex" class="button mb-30" style="--width: 100%" @click="onClickselectListItem(index, son)">{{ son }}</view>
			</view>
		</block>
		<!-- 申请下一步 -->
		<view v-if="isComplete" @click="onClickComplete" class="button relative" style="--width: 552rpx;margin: auto;margin-top: 60rpx;">下一步</view>
		
		<!-- 背景图片 -->
		<view class="bottom-bg"><image src="../../../static/icon/appalybg.png" mode=""></image></view>
	</view>
</template>

<script>
import vButton from '@/components/button/button.vue';

export default {
	components: {
		vButton
	},
	data() {
		return {
			section: -1, //当前申请停留所在位置
			// 调研列表
			researchList: [
				{
					problem: '请选择您当前的学习状态',
					icon: '../../../static/icon/xuexi.png',
					iconw: '83',
					isUnfold: false,
					title: '学习状态',
					answer: '',
					selectList: ['学习过', '未学习过']
				},
				{
					problem: '您现在的问题是什么',
					icon: '../../../static/icon/wenti.png',
					iconw: '61',
					isUnfold: false,
					title: '学习意愿',
					answer: '',
					selectList: ['不知道该学什么', '没有计划', '学习方式是什么', '学习是否有效果？', '学习课程是如何收费的？']
				},
				{
					problem: '那你的学习计划是什么？',
					icon: '../../../static/icon/wenti.png',
					iconw: '61',
					isUnfold: false,
					title: '学习计划',
					answer: '',
					selectList: ['学习一天', '学习一周', '学习一月']
				},
				{
					problem: '您现在的目标',
					icon: '../../../static/icon/wenti.png',
					iconw: '61',
					isUnfold: false,
					title: '学习目标',
					answer: '',
					selectList: ['年级前十', '班级前十']
				}
			]
		};
	},
	watch: {
		section(val) {
			if (val == this.researchList.length) {
				return;
			} else {
				let researchList = this.researchList;
				this.researchList = researchList.map(item => {
					item.isUnfold = false;
					return item;
				});
				this.researchList[val].isUnfold = true;
			}
		}
	},
	computed: {
		isComplete() {
			// 是否完成进行下一步
			let list = this.researchList.filter(item => item.answer);
			return list.length === this.researchList.length;
		}
	},
	onLoad() {
		this.section = 0;
	},
	methods: {
		// 点击列表数据项
		onClickselectListItem(index, key) {
			setTimeout(() => {
				if (!this.researchList[index].answer || (this.researchList[index + 1] && !this.researchList[index + 1].answer)) {
					this.section = this.section + 1;
				}
				this.researchList[index].answer = key;
				this.researchList[index].isUnfold = false;
			}, 300);
		},
		// 点击问题标题选择
		onClickTitleFn(index) {
			setTimeout(() => {
				let researchList = this.researchList;
				if (this.section === index) {
					this.researchList[index].isUnfold = !this.researchList[index].isUnfold;
					return;
				}
				this.section = index;
			}, 100);

			// this.researchList = researchList.map((item, itemIndex) => {
			// 	if(!(index > itemIndex)) {
			// 		item.answer = ""
			// 	}
			// 	return item
			// })
		},
		// 点击完成进行下一步
		onClickComplete() {
			this.onGoNext("/pages/make-apply/second-step/second-step")
		}
	}
};
</script>

<style lang="scss" scoped>
.title-cont {
	height: 73rpx;
	border-radius: 10rpx;
	padding: 0 24rpx;
	background-color: $color-white;
	box-shadow: 3rpx 3rpx 10rpx rgba(#000, 0.1);
	&:active {
		background-color: $bg-color-grey;
	}
}
.relative {
	position: relative;
	z-index: 10;
	text-align: center;
}
.button {
	width: var(--width);
	height: 94rpx;
	border-radius: 10rpx;
	color: $text-color;
	background-color: $color-primary;
	font-size: 30rpx;
	box-shadow: 6rpx 6rpx 8rpx rgba($color-primary, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	&:active {
		background-color: darken($color: $color-primary, $amount: 20);
		transform: translate(1px, 1px);
	}
}

.bottom-bg {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100vw;
	height: 334rpx;
}
</style>
